<template>
  <div class="index">
    <Header></Header>
    <div class="main">
      <p class='current-nav'>当前位置 : <router-link to='index'>首页</router-link> <i> > </i>修改密码</p>
      <div class="infor personset"
           style="margin-bottom:0;">
        <p class="title">修改密码</p>

        <div class="form-container">

          <el-form :model="ruleForm"
                   :rules="rules"
                   ref="ruleForm"
                   label-width="184px"
                   class="demo-ruleForm">
            <el-form-item label="账号 :">
              <el-input v-model="ruleForm.userAccount"
                        disabled></el-input>
            </el-form-item>
            <el-form-item label="手机号 :"
                          prop="mobileNo">
              <el-input v-model="ruleForm.mobileNo"></el-input>
            </el-form-item>
            <el-form-item label="手机验证码 :"
                          prop="smsCode">
              <el-input v-model="ruleForm.smsCode"
                        style='width:238px;'></el-input>
              <el-button style='color:#9f90ef;'
                         @click="getCode"
                         v-show="codeFlag">点击获取</el-button>
              <el-button style='color:#666;background:#ccc;cursor:no-drop;'
                         id="smsCode"
                         v-show="!codeFlag">点击获取</el-button>
            </el-form-item>
            <el-form-item label="旧密码 :"
                          prop="oldPasswd">
              <el-input v-model="ruleForm.oldPasswd"
                        type='password'></el-input>
            </el-form-item>
            <el-form-item label="新密码 :"
                          prop="newPasswd">
              <el-input v-model="ruleForm.newPasswd"
                        type='password'></el-input>
            </el-form-item>
            <el-form-item label="确认密码 :"
                          prop="newPasswd2">
              <el-input v-model="ruleForm.newPasswd2"
                        type='password'></el-input>
            </el-form-item>

          </el-form>
          <div class="bts">
            <el-button type="primary"
                       @click="submitForm('ruleForm')"
                       class='sure'>保存</el-button>
            <el-button @click="resetForm('ruleForm')"
                       class='cancel'>取消</el-button>
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../common/header'
import Footer from '../common/footer'
import config from "../../config.js"
export default {
  components: {
    Header,
    Footer
  },
  data () {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    }
    var checknewPasswd = (rule, val, callback) => {
      console.log(val)
      if (!val) {
        return callback(new Error('新密码不能为空'))
      } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/.test(val)) {
        return callback(new Error('请输入8-16位密码,必须包含大小写字母及数字'))
      } else if (this.ruleForm.newPasswd == this.ruleForm.oldPasswd) {
        return callback(new Error('新密码不能和原密码相同'))
      } else {
        callback()
      }
    }
    var checknewPasswd2 = (rule, val, callback) => {
      if (!val) {
        return callback(new Error('新密码不能为空'))
      }
      if (this.ruleForm.newPasswd != this.ruleForm.newPasswd2) {
        return callback(new Error('两次密码输入不一致'))
      }
      callback()
    }
    return {
      uploadFlag: false,
      codeFlag: true,
      time: null,
      ruleForm: {
        userAccount: '',
        mobileNo: '',
        smsCode: '',
        oldPasswd: '',
        newPasswd: '',
        newPasswd2: ''
      },
      rules: {
        oldPasswd: [
          { required: true, message: "请输入原密码", trigger: "blur" }
        ],
        newPasswd: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          {
            required: true,
            validator: checknewPasswd,
            trigger: "blur"
          }
        ],
        newPasswd2: [
          { required: true, message: "请再次输入新密码", trigger: "blur" },
          {
            required: true,
            validator: checknewPasswd2,
            trigger: "blur"
          }
        ],
        mobileNo: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            required: true,
            validator: checkPhone,
            trigger: "blur"
          }
        ],
        smsCode: [
          { required: true, message: "请输入手机验证码", trigger: "blur" }
        ]
      }
    }

  },
  mounted () {
    this.ruleForm.userAccount = JSON.parse(localStorage.user).userAccount
  },
  created () {

  },
  methods: {
    getCode () {
      this.codeFlag = false;
      var reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
      if (reg.test(this.ruleForm.mobileNo)) {
        var t = 30;
        this.time = setInterval(() => {
          t--;
          if (t != 0) {
            document.getElementById("smsCode").innerHTML = t + "s";
          } else {
            t = 0;
            clearInterval(this.time);
            this.codeFlag = true;
          }
        }, 1000);
        this.$axios.post(config.baseUrl + "emergency/v1.0/sms/verifyCode", {
          mobileNo: this.ruleForm.mobileNo
        })
          .then(res => {
            if (res.data.meta.success) {
              this.$message.success(res.data.data.verifySuccess);
            } else {
              this.$message.warning(res.data.meta.message);
            }
          })
          .catch(response => {
            console.log(response);
          });
      } else {
        this.$message.warning("请输入正确的手机号");
      }
    },
    success (res) {//来自子组件 上传成功 关闭弹窗
      this.uploadFlag = false
    },
    submitForm () {
      let params = {
        mobileNo: this.ruleForm.mobileNo,
        newPasswd: this.$md5(this.ruleForm.newPasswd),
        oldPasswd: this.$md5(this.ruleForm.oldPasswd),
        smsCode: this.ruleForm.smsCode,
        userAccount: this.ruleForm.userAccount
      }
      this.$axios.post(config.baseUrl + 'emergency/v1.0/modify/password', params)
        .then((res) => {
          // console.log(res)
          if (res.data.meta.success) {
            this.$message.success(res.data.meta.message);
            this.$router.push('login')
          } else {
            this.$message.warning(res.data.meta.message)
          }

        }).catch((response) => {
          console.log(response);
        })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
@import "../../../static/css/information.less";
.personset {
  .form-container {
    width: 766px;
    padding: 0 0 70px;
    margin: 0 auto;
    .el-form {
      margin-top: 34px;
    }
    .el-button {
      width: 118px;
      height: 42px;
      border-radius: 8px;
    }
    .el-input {
      width: 360px;
    }
  }
}
</style>
